<template>
    <div id="app">
      <div class="content-area">
        <!--<Slider :value.sync="value" range></Slider>-->
        <div class="textarea" contenteditable="true" @input="zhuan($event)"></div>
<!--        <div class="copy-box">-->
<!--          <span data-clipboard-action="copy" class="copyRender" :data-clipboard-text="content" @click="copyContent">复制内容</span>-->
<!--        </div>-->
        <div class="textarea" contenteditable="false" v-html="content"></div>
      </div>
    </div>
</template>

<script>
    export default {
      props:{
        name: "SqlAppend"
      },
      data(){
          return {
            content: 'Hello Vue!',
            message:"MyIviewDemo",
            value: [20, 50],
          }
      },
      created() {
        this.zhuan();
      },
      methods:{
        copyContent() {
          let _this = this;
          let clipboard = new this.clipboard(".copyRender");
          clipboard.on('success', function () {
            _this.$Message.success('复制成功');
          });
          clipboard.on('error', function () {
            _this.$Message.success('复制失败');
          });
        },
        // 查询总行数
        findCharCount(str, char){
          var index = str.indexOf(char);        // 字符出现的位置
          var num = 0;                          // 这个字符出现的次数
          while(index !== -1) {
            console.log(index);                 // 打印字符串出现的位置
            num++;                              // 每出现一次 次数加一
            index = str.indexOf(char,index + 1); // 从字符串出现的位置的下一位置开始继续查找
          }
          return num;
        },
        findChar(str,cha){
          var num = this.findCharCount(str, "\n");
          var x=str.indexOf(cha);
          var perLine = "";
          var final = 'sql.append(" ' +str.substring(0, x).concat('");<br/>') // 第一行
          for(var i=0;i<num-1;i++){
            perLine = str.substring(x, str.indexOf(cha,x+1)); // 每一行
            x = str.indexOf(cha,x+1);
            perLine = 'sql.append(" ' +perLine.replace("\n","").concat('");')
            var fp = final + perLine;
            final = fp+" <br/>";
          }
          this.content = final;
          return x;
        },
        zhuan(e){
          this.$nextTick(() => {
            var cnt = e.target.innerText.trim();
            if(!cnt || cnt.trim().length<0)
            {
              this.$Message.success('别他娘的胡球子按');
              return;
            }
            else
            {
              cnt = cnt + "\n";
              localStorage.setItem("gn_append_sql", cnt);
              var final = localStorage.getItem("gn_append_sql");
              if(!final||final.trim().length<0)final = cnt;
              this.findChar(final, "\n")
            }

          });

        }
      }
    }
</script>

<style scoped>
  .content-area{
    width: 800px;
    margin: 0 auto;
  }
  .textarea{
    background-color: rgb(43, 43, 43);
    color: rgb(204, 120, 50);
    font-family: 宋体;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 0 20px 20px;
    outline: 0;
    font-size: 14px;
    line-height: 24px;
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    text-align: left;
  }
  .textarea:first-child{
    border-bottom: 1px dashed #f90;
  }
  /*.copy-box span{*/
  /*  background: rgb(43, 43, 43);*/
  /*  color: rgb(204, 120, 50);*/
  /*  display: inline-block;*/
  /*  width: 800px;*/
  /*  height: 20px;*/
  /*  font-size: 14px;*/
  /*  font-weight: bold;*/
  /*  line-height: 20px;*/
  /*  cursor: pointer;*/
  /*  border-top: 1px dashed rgb(204, 120, 50);*/
  /*  border-bottom: 1px dashed rgb(204, 120, 50);*/
  /*}*/
  /*.copy-box span:hover{*/
  /*  background: rgb(204, 120, 50);*/
  /*  color: rgb(43, 43, 43);*/
  /*}*/
  .textarea:empty:before{
    content: '请输入你想要拼接的SQL';
    color: gray;
  }
  .textarea:focus:before{
    content:none;
  }
</style>
